import React, { useRef, useState } from 'react'
import { Select, Button } from 'antd'
import type { SelectProps } from 'antd'
import type { DefaultOptionType } from 'antd/lib/select'

type RawValue = string | number

const options: SelectProps['options'] = [
  {
    label: '全部',
    value: '全部',
  },
  {
    label: '1666',
    value: 0,
  },
  {
    label: '2666',
    value: 1,
  },
  {
    label: '3666',
    value: 2,
  },
  {
    label: '4666',
    value: 3,
  },
  {
    label: '5666',
    value: 4,
  },
  {
    label: '6666',
    value: 5,
  },
];

const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};

const User: React.FC = () => {
  const [selectValue, setSelectValue] = useState<DefaultOptionType[]>([{
    label: '1666',
    value: 0,
  }])

  const isClickAll = useRef(false)

  const handleOnSelect = (key: string, value: DefaultOptionType) => {
    if (key === '全部') {
      if (!isClickAll.current) {
        const all = [
          {
            label: '1666',
            value: 0,
          },
          {
            label: '2666',
            value: 1,
          },
          {
            label: '3666',
            value: 2,
          },
          {
            label: '4666',
            value: 3,
          },
          {
            label: '5666',
            value: 4,
          },
          {
            label: '6666',
            value: 5,
          },
        ]

        setSelectValue(all)
        isClickAll.current = true
      } else {
        setSelectValue([])
        isClickAll.current = false
      }

    } else {
      setSelectValue(v => v.concat(value))
      isClickAll.current = false
    }
  }

  const handleOnDeselect = (value: RawValue) => {
    const delValue = selectValue.filter(item => item.value !== value)
    setSelectValue(delValue)
    isClickAll.current = false
  }

  const change = () => {
    window.location.hash = '/home666'
  }

  return (
    <React.Fragment>
      <Select
        mode='multiple'
        style={{ width: '100%' }}
        placeholder='Tags Mode'
        onChange={handleChange}
        options={options}
        onSelect={handleOnSelect}
        onDeselect={handleOnDeselect}
        value={selectValue as any}
      // optionLabelProp={selectValue}
      />

      <hr />
      <Button type='primary' onClick={change}>
        跳转
      </Button>
      <div onClick={() => setSelectValue([{
        label: '1666',
        value: 0,
      }])}>练习</div>

    </React.Fragment>
  )
}

export default User

